<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>学习用的测试页面导航</title>
	<script src="js_lib/jquery-1.10.1.min.js"></script>
	<script src="js_lib/template-native.js"></script>
	<link rel="stylesheet" href="style_lib/base.css">
	<link rel="stylesheet" href="http://at.alicdn.com/t/font_61trmepyeng66r.css">
	<style>
		.container{
			position:absolute;
			height:100%;
			width:100%;
			max-width:100%;
			min-width:800px;
		}
		.sidebar{
			width:20%;
			height:100%;
			background: #373e40;
			position:absolute;
			font-size:1.3rem;
			color:#b9b9b9;
		}
		.sidebar li {
			line-height: 30px;
		}
		 li a{
		 	color:inherit;		 
		 	display: block;
		 	width:100%;
		 }
		 .main{
		 	margin-left:20%;
		 	position: absolute;
		 	height:100%;
		 	width:80%;
		 }
		
		 .menuItem{
		 	background:#242a2b;
		 	font-size:1.5rem;
		 	text-align: center;
		 	cursor:pointer;
		 	border-bottom:1px solid #191e1f;
		 	border-top:1px solid #353b3c;
		 }
		 .menuItem>.iconfont{
		 	float:right;
		 	display: block;
		 	margin-right:20px;
		 }
		 .subMenu{
		  	display: none;
		  }
		 .subMenu>li:hover{
		 	background:#323638;
		 	border-top:1px solid #2b2f31;
		 }
		 .subMenu>li{
		 	padding:0 20px;
	 	    border-bottom: 1px solid #31383a;
		    border-top: 1px solid #42484a;
		 	background:#373e40;
		 	display:block;
		 }
		.sidebar>.top{
			font-size:18px;
			background-color: #373e40;
			height:80px;
			line-height:80px;
			text-align: center;
			border-bottom:1px solid #191e1f;;
			
		}
	 </style>
</head>
<body>
<div class="container">
	<div class="sidebar">
		<div class="top">
				个人前端案例展示
		</div>
		<ul class="menu">
			<li class="menuItem">一些小demo <i class="iconfont icon-less"></i> </li>
			<ul class="subMenu" style="display: block">
					<li><a href="demo/事件相关/DOM0-level-EventListener.html">DOM0及注册事件实现事件冒泡</a></li>
					<li><a href="demo/移动端实战/index.html"   >移动端实战项目(未完成)</a></li>
					<li><a href="demo/问答应用练习/index.html"   >问答小demo</a></li>
					<li><a href="demo/qqSideBar/index.html"   >qq侧边栏在线客服</a></li>
					<li><a href="demo/webseit/index.html" >一个网站主页展示</a></li>
					<li><a href="demo/placeholder兼容.html" >placeholder兼容</a></li>
					<li><a href="demo/scrollTop.html" >返回顶部第一种实现</a></li>
					<li><a href="demo/scrollTop2.html" >返回顶部第二种实现</a></li>
					<li><a href="demo/mouseMove.html" >三个圆跟随鼠标移动</a></li>
					<li><a href="demo/aimInWindowCenter.html" >页面中心放一个准星</a></li>
					<li><a href="demo/test.html" >毫无意义的test</a></li>
			</ul>
		</ul>
		<!-- <ul class="menu">
			<li class="menuItem">css某些样式技巧 <i class="iconfont icon-moreunfold"></i></li>
			<ul class="subMenu">
					<li><a href="css/picMiddleVertical.html">图片垂直居中</a></li>
					<li><a href="css/table-center.html">文字tabe-cell垂直居中</a></li>
					<li><a href="css/threeColum.html">页面三列布局</a></li>
			</ul>
		</ul> -->
		<!-- <ul class="menu">
			<li class="menuItem">博客前端项目展示 <i class="iconfont icon-moreunfold"></i></li>
			<ul class="subMenu">
					<li><a href="博客前端/01/01.html">test1</a></li>
					<li><a href="博客前端/02连缀/demo.html">02连缀</a></li>
					<li><a href="博客前端/03css操作/demo.html">03css操作</a></li>
					<li><a href="博客前端/05下拉菜单/demo.html">05下拉菜单</a></li>
					<li><a href="博客前端/06登陆界面/demo.html">06登陆界面</a></li>
					<li><a href="博客前端/0拖拽/demo.html">0拖拽</a></li>
					<li><a href="博客前端/myJQuery/index.html">仿写jQuery库</a></li>
			</ul>
		</ul> -->
		<ul class="menu">
			<li class="menuItem">jquery demo <i class="iconfont icon-moreunfold"></i></li>
			<ul class="subMenu">
					<li><a href="jqueryLearning/others/拖拽.html">鼠标拖拽div</a></li>
					<li><a href="jqueryLearning/others/图片放大镜.html">图片放大镜</a></li>
					<li><a href="jqueryLearning/others/随机马赛克闪烁.html">随机马赛克闪烁</a></li>
					<li><a href="jqueryLearning/others/选项卡.html">选项卡</a></li>
					<li><a href="jqueryLearning/others/lazyLoadImg.html">惰性加载图片</a></li>
					<li><a href="jqueryLearning/others/贪吃蛇哟.html">贪吃蛇</a></li>
					<li><a href="jqueryLearning/others/模拟手机发送短信.html">模拟手机发送短信</a></li>
					<li><a href="jqueryLearning/others/手风琴效果.html">手风琴效果</a></li>
			</ul>
		</ul>
		<ul class="menu">
			<li class="menuItem">bootstrap 测试 <i class="iconfont icon-moreunfold"></i></li>
			<ul class="subMenu">
					<li><a href="bootstrap/index.html">test1</a></li>
					<li><a href="bootstrap/nav.html">test2</a></li>
					<li><a href="bootstrap/navBar.html">test3</a></li>
			</ul>
		</ul>

		
		
	</div>
	
	<iframe class="main" id="iframe" src="demo/test.html" frameborder="0"></iframe>
</div>

<script>
	$(function(){
		
		// 展开子菜单
		$(".menuItem").click(function(){
			$(this).find(".iconfont").toggleClass("icon-less").toggleClass("icon-moreunfold")
			$(this).next().slideToggle(100);
		})
		// 访问过得菜单添加样式
		$(".subMenu li").click(function(){
			$(this).css("color","#668398")
		})

		// 点击链接，显示demo
		$(".sidebar li a").click(function(e){
			e.preventDefault() ;
			var href = $(this).attr('href');
			$("#iframe").attr("src",href);
		})
	})
</script>
	
</body>
</html>